Tiles

Dashboard Tiles

Profile

Membership

Events

CFA Program

CIPM Program

Investment Foundations Program

Privacy

Payment History

Continuing Education

Volunteer Opportunities

Research Challenge

HTML

<div class="tile-row">
    <a href="#" class="tile-link">
        <div class="tile-content profile-tile">
            <i class="tile-icon" aria-hidden="true"></i>
            <p class="tile-title">Profile</p>
        </div>
    </a>
</div>

Problem Being Solved

Users need a way to see the myriad apps they can drill down into.

When to Use

This pattern should be used to present a series of unrelated, equally-weighted links to apps. It works best when we can assume nothing about the best path forward.

When Not to Use

This pattern should not be used for anything except a dashboard.

Formatting

Currently, individual tile colors and icons are hard coded per app. Be sure to use or create styles and classes specific to the app.

Alternative Tiles

Videos
Articles
Webinars
Books & Chapters
Reports
Podcasts
Online Courses
Instructor-Led Courses
Events
Refresher Readings
Magazine Issues
Exec Ed Workshop

HTML

<div class="tiles-alt">
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-play_button white" aria-hidden="true"></i>
                <div class="tile-alt-title">Videos</div>
            </div>
        </a>
    </div>
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-newspaper  white" aria-hidden="true"></i>
                <div class="tile-alt-title">Articles</div>
            </div>
        </a>
    </div>
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-laptop  white" aria-hidden="true"></i>
                <div class="tile-alt-title">Webinars</div>
            </div>
        </a>
    </div>
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-book white" aria-hidden="true"></i>
                <div class="tile-alt-title">Books & Chapters</div>
            </div>
        </a>
    </div>
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-graph_up_down_3 white" aria-hidden="true"></i>
                <div class="tile-alt-title">Reports</div>
            </div>
        </a>
    </div>
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-audio white" aria-hidden="true"></i>
                <div class="tile-alt-title">Podcasts</div>
            </div>
        </a>
    </div>
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-laptop white" aria-hidden="true"></i>
                <div class="tile-alt-title">Online Courses</div>
            </div>
        </a>
    </div>
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-book_open white" aria-hidden="true"></i>
                <div class="tile-alt-title">Instructor-Led Courses</div>
            </div>
        </a>
    </div>
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-calendar white" aria-hidden="true"></i>
                <div class="tile-alt-title">Events</div>
            </div>
        </a>
    </div>
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-book_bookmark white" aria-hidden="true"></i>
                <div class="tile-alt-titlev">Refresher Readings</div>
            </div>
        </a>
    </div>
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-folded_paper white" aria-hidden="true"></i>
                <div class="tile-alt-title">Magazine Issues</div>
            </div>
        </a>
    </div>
    <div class="tile-alt">
        <a href="#" class="tile-alt-link">
            <div class="tile-alt-content">
                <i class="tile-alt-icon cfaicon-government white" aria-hidden="true"></i>
                <div class="tile-alt-title">Exec Ed Workshop</div>
            </div>
        </a>
    </div>
</div>

Problem Being Solved

We want to present tiles in an alternative but still simple and aproachable way.

When to Use

This pattern should be used to present a series of equally-weighted links, probably related in some way.

When Not to Use

This pattern should not be used when a normal link will suffice.

Formatting

Current color possibilities are blue (default) and p_green. Add the color class to the "tiles-alt" group container.